// ----------------------- 图表概览 -----------------------
// 班级相关的信息 -- /student/overview
function overview() {
  axios.get('/student/overview').then(({ data: res }) => {
    // console.log(res);
    if (res.code === 0) {
      // 渲染
      qs('.total').innerHTML = res.data.total
      qs('.avgSalary').innerHTML = res.data.avgSalary
      qs('.avgAge').innerHTML = res.data.avgAge
      qs('.proportion').innerHTML = res.data.proportion
    }
  })
}
overview()

// 柱状图
function getScoreBatch(batch = 1) {
  // batch 为 1 代表默认显示的是第一次成绩
  axios.get('/score/batch', {
    params: {
      batch
    }
  }).then(({ data: res }) => {
    // console.log(res);
    if (res.code === 0) {
      // 取出对应的数据, 并替换渲染
      barChart(res.data)
    }
  })
}
getScoreBatch()

// 获取学生列表
function getStudentList() {
  axios.get('/student/list').then(({ data: res }) => {
    // console.log(res);
    if (res.code === 0) {

      const nameArr = [] // 学生姓名的数组列表 
      const salaryArr = [] // 学生薪资的数组列表 
      const truesalaryArr = [] // 学生期望薪资的数组列表 

      // 地图，第一组数据
      let chinaGeoCoordMap = { 上海: [121.4648, 31.2891] }
      // 地图，第二组数据
      let chinaDatas = []

      // 饼图的数据
      let pieData = []

      res.data.forEach(item => {
        // 添加折线图数据
        nameArr.push(item.name)
        salaryArr.push(item.salary)
        truesalaryArr.push(item.truesalary)

        // 添加地图数据  
        chinaGeoCoordMap[item.county] = [item.jing, item.wei]
        chinaDatas.push([{ name: item.county, value: 0 }])

        // 添加饼图的数据
        const index = pieData.findIndex(v=> v.name === item.province)
        if (index >= 0) {
          // 找到了, 让当前这一项的value ++
          pieData[index].value ++
        } else {
          // 没有找到 - 将数据添加到新数组中
          pieData.push({
            value: 1,
            name: item.province
          })
        }
      })

      // console.log(nameArr,
      //   salaryArr,
      //   truesalaryArr);
      lineChart(nameArr, salaryArr, truesalaryArr)

      // console.log(chinaGeoCoordMap, chinaDatas);
      mapChart(chinaGeoCoordMap, chinaDatas)

      // 饼图
      pieChart(pieData)
    }
  })
}
getStudentList()

// 需求: 
// 给三个点注册点击事件 -- 切换盒子 toggle('show')
qs('.btn').onclick = function () {
  qs('#batch').classList.toggle('show')
}

/*
  切换柱状图 --- 
  点击按钮,实现柱状图的切换
  注册点击事件
  获取下标 
  调用对应的方法
*/
qsAll('#batch li').forEach((item, index) => {
  item.onclick = function () {
    // 拿到当前点击这项的下标
    console.log('下标', index);
    // index + 1 代表着第几次成绩
    getScoreBatch(index + 1)
  }
})

// ----------------------- 饼图 -----------------------
function pieChart(pieData) {
  let myChart = echarts.init(qs('.pie'));
  let option = {
    tooltip: {
    },
    title: {
      text: '籍贯 Hometown',
      textStyle: {
        color: '#6d767e' // 标题演示
      },
    },
    series: [
      {
        name: '各地学员分布',
        type: 'pie', // pie 表示饼图
        radius: ['10%', '65%'], // 内外圈的半径
        center: ['50%', '50%'], // 中心点
        roseType: 'area', // area表示面积模式，radius表示半径模式
        itemStyle: { // 每一项的设置
          borderRadius: 4, // 扇形边缘圆角设置
        },
        data: pieData
      }
    ]
  }
  myChart.setOption(option)
}
// ----------------------- 地图 -----------------------
function mapChart(chinaGeoCoordMap, chinaDatas) {
  const myChart = echarts.init(document.querySelector('.map'))

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = chinaGeoCoordMap[dataItem[0].name];
      var toCoord = [121.4648, 31.2891];
      if (fromCoord && toCoord) {
        res.push([{
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord,
        }]);
      }
    }
    return res;
  };
  var series = [];
  [['上海', chinaDatas]].forEach(function (item, i) {
    series.push({
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 5, //图标大小
      },
      lineStyle: {
        normal: {
          width: 1, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: .3 //尾迹线条曲直度
        }
      },
      data: convertData(item[1])
    }, {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: { //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 4 //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        normal: {
          show: true,
          position: 'right', //显示位置
          offset: [5, 0], //偏移设置
          formatter: function (params) {//圆环显示文字
            return params.data.name;
          },
          fontSize: 13
        },
        emphasis: {
          show: true
        }
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 5 + val[2] * 5; //圆环大小
      },
      itemStyle: {
        normal: {
          show: false,
          color: '#f00'
        }
      },
      data: item[1].map(function (dataItem) {
        return {
          name: dataItem[0].name,
          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
        };
      }),
    },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            //offset:[5, 0],
            color: '#0f0',
            formatter: '{b}',
            textStyle: {
              color: "#0f0"
            }
          },
          emphasis: {
            show: true,
            color: "#f60"
          }
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [{
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        }],
      }
    );
  });

  const option = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(166, 200, 76, 0.82)',
      borderColor: '#FFFFCC',
      showDelay: 0,
      hideDelay: 0,
      enterable: true,
      transitionDuration: 0,
      extraCssText: 'z-index:100',
      formatter: function (params, ticket, callback) {
        //根据业务自己拓展要显示的内容
        var res = "";
        var name = params.name;
        var value = params.value[params.seriesIndex + 1];
        res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
        return res;
      }
    },
    backgroundColor: '#fff',
    visualMap: {
      //图例值控制
      min: 0,
      max: 1,
      calculable: true,
      show: false,
      color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
      textStyle: {
        color: '#fff',
      },
    },
    // backgroundColor:"#013954",
    // visualMap: { //图例值控制
    // 	min: 0,
    // 	max: 1,
    // 	calculable: true,
    // 	show: true,
    // 	color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
    // 	textStyle: {
    // 		color: '#fff'
    // 	}
    // },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          color: 'rgba(51, 69, 89, .5)', //地图背景色
          borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' //悬浮背景
        }
      }
    },
    series: series
  };
  myChart.setOption(option)
}
//  ----------------------- 柱状图 -----------------------
function barChart({ avgScore, group, gt60, gt80, lt60 }) {
  const myChart = echarts.init(document.querySelector('.barChart'))
  const option = {
    // 网格（整个图表区域设置）
    grid: {
      top: 30,
      bottom: 30,
      left: '7%',
      right: '7%'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    legend: {

    },
    xAxis: [
      {
        type: 'category',
        data: group, // 分组
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: {
          formatter: '{value}分'
        }
      },
      {
        type: 'value',
        min: 0,
        max: 10,
        interval: 1,
        axisLabel: {
          formatter: '{value}人'
        }
      }
    ],
    series: [
      {
        name: '平均分',
        type: 'bar',
        barWidth: '15', // 柱子的宽度
        data: avgScore // 平均分
      },
      {
        name: '低于60分人数',
        type: 'bar',
        barWidth: '15', // 柱子的宽度
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
        data: lt60
      },
      {
        name: '60-80分之间',
        type: 'bar',
        barWidth: '15', // 柱子的宽度
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
        data: gt60
      },
      {
        name: '高于80分人数',
        type: 'bar',
        barWidth: '15', // 柱子的宽度
        yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
        data: gt80
      }
    ]
  };

  myChart.setOption(option)
}
// ----------------------- 折线图 -----------------------
function lineChart(nameArr, salaryArr, truesalaryArr) {
  const myChart = echarts.init(document.querySelector('.line'))
  const option = {
    tooltip: {  // 提示框组件
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      }
    },
    title: {
      text: '薪资 Salary',
      textStyle: {
        color: '#6d767e' // 标题演示
      }
    },
    // toolbox: {
    //   feature: {
    //     dataZoom: {
    //       yAxisIndex: 'none'
    //     },
    //     restore: {},
    //     saveAsImage: {}
    //   }
    // },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: nameArr  // 学生名字
    },
    yAxis: {
      type: 'value',
      // 比如，图表中的数据最大值是17000，则Y轴最大数字大约是 17000 + 17000 * 50%
      boundaryGap: [0, '50%']
    },
    legend: {
      top: 20
    },
    dataZoom: [
      // {
      //   type: 'inside',
      //   start: 0,
      //   end: 10
      // },
      {
        start: 0,
        end: 30 // 百分比
      }
    ],
    series: [ // 系列数据
      {
        name: '期望薪资',
        type: 'line',
        symbol: 'none',
        sampling: 'lttb',
        smooth: true, // 平滑曲线
        itemStyle: {
          color: '#ee6666'
        },
        data: salaryArr // 期望薪资
      },
      {
        name: '实际薪资',
        type: 'line',
        symbol: 'none',
        sampling: 'lttb',
        smooth: true, // 平滑曲线
        itemStyle: {
          color: '#5470c6'
        },
        data: truesalaryArr // 实际薪资
      }
    ]
  };
  myChart.setOption(option)
}